<template>
  <div>
    <el-dialog title="分配线索" 
    v-model="props.Distributiondialog" 
    style="width:700px;"
    >
      <el-col :span="24">您选择了<span style="color:#05cc95">{{props.selectedIds.length}}</span>个线索,请选择人员进行分配:</el-col>
     <el-col :span="24"> 
        <el-form ref="form"
        :rules="rules"
          label-width="90px"
          style="display:flex;justify-content: space-between;margin-top:20px"
          :model="dep">
          <el-form-item label="请选择部门" porp="deptName">
      <el-select  placeholder="请选择" v-model="dep.deptName" @change="senddep">
        <el-option v-for="item in Departmendata" :key="item.index" :value="item" />
  
      </el-select>
    </el-form-item>
          <el-form-item label="请选择人员" prop="employee">
      <el-select  placeholder="请选择" v-model="dep.employee">
        <el-option  v-for="item in personneldata" :key="item.index" :value="item"/>
   
      </el-select>
    </el-form-item>
  </el-form></el-col>

      
       <div style="display: flex; justify-content: end">
        <el-button 
        @click="btnCancel" 
        class="searchbtn" 
        style="width:100px;height:40px"
          >取 消</el-button
        >
        <el-button 
        class="searchbtn green" 
        type="primary" size="large" 
        style="width: 100px"
        @click="BatchadditionBTN"
          >确定</el-button
        >
      </div>
</el-dialog></div>
<el-dialog title="分配失败" v-model="resultdialog" style="width:600px;height:200px">
<el-col :span="24">保有量达到上线,最多选择3条线索</el-col>
</el-dialog>
</template>

<script setup >
import { ref,onMounted} from 'vue'
// import {Allocationcue} from './BatchAddition.vue'
import {getpersonnel,Allocationcue} from '@/api/home'
import { ElMessage } from 'element-plus'


const resultdialog =ref(false)
const props = defineProps({
  Distributiondialog: {
    type: Boolean,
    default: false
  },
selectedIds:{
  type: Array,
  default: () => []
},
   Departmendata:{
    type:Array,
    default:Array 
  },
})

const dep=ref({
  deptName:'',
  employee:'',

})
const personneldata= ref([])
const senddep=async()=>{
const {data}=  await getpersonnel (dep.value)
personneldata.value=data
console.log(personneldata.value);
}

onMounted(()=>{
console.log(props.data);
console.log(props.Departmendata);
})
//子传父弹窗
const emits = defineEmits(["closeDialog"])
const btnCancel = () => {
 emits('closeDialog',false)

}

const BatchadditionBTN =async()=>{
   await form.value.validate()
  dep.value.ids=props.selectedIds
if(dep.value.ids.length===0){
   ElMessage.error('请选择至少一条线索')
  }
  else if(dep.value.ids.length>3){
    resultdialog.value=true
  }

else if(dep.value.ids.length>9){
    await Allocationcue(dep.value)
   ElMessage.error("操作失败，该用户线索已达十个,不能分配额外线索")
       resultdialog.value=false
  }
  else{
    dep.value.ids
    await Allocationcue(dep.value)
  ElMessage.success('分配成功')
      resultdialog.value=false
  }
btnCancel()
}

const form=ref({})
 const rules=({
      deptName: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
      employee: [{ required: true, message: '部门人员不能为空', trigger: 'blur' },],
   
  })

</script>

<style scoped >
::v-deep .el-dialog__header{
  padding: 0px;
  margin: 0px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e9e6e6;
  color: #fff !important;

}
::v-deep .el-dialog{
  padding: 0px;
}

.searchbtn {
  border-radius: 20px;
}
.green {
  background-color: #05cc95;
}
.el-form-item {
    display: block;
}

</style>